<template>
<div class="page-container-padding">
   <!-- 查询条件 -->
  <el-select v-model="flag" size="mini" style="width:120px;" @change="selectValueChange">
    <el-option :value="0" label="全部"></el-option>
    <el-option :value="-1" label="未评级"></el-option>
    <el-option :value="1" label="已评级"></el-option>
  </el-select>
  <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="queryData">查询</el-button></span>
  <div style="line-height:22px;background-color: #C7EFCF;padding:2px 4px;margin-top:6px;">评级说明：根据课件美观度、数据、图表、逻辑深度以及讲课表现进行评价，达到四项要求的A、达到三项的B，小于两项的C</div>
  <!-- 显示数据 -->
  <div style="margin-top:10px;line-height:28px;">
    <div v-for="item,index in dataList" :key="index" class="msg-box">
      <div><span>标题：</span><span style="margin-right:10px;color:#0073FC;font-weight:700;font-size:16px;">{{ item.title }} </span><span v-if="item.annex">附件：<a :href="fileStorage + item.annex_url">{{ item.annex }}</a></span></div>
      <div><span>时间：</span><span>{{ item.create_date }} </span></div>
      <div><span>申请部门：</span><span>{{ item.applicant }} </span></div>
      <div><span>类型：</span><span>{{ item.lecture_type_zh }} </span></div>
      <div><span>规模：</span><span>{{ item.lecture_scale_zh }} </span></div>
      <div>
        <span>交易所举办：</span>
          <span v-if="item.is_exchange === '是'">{{ item.exchange_name }}</span>
        <span v-else>否</span>
      </div>
      <div>
        <span style="font-size:18px;color:#ff5300;font-weight:700;margin-right:6px;">评级:</span>
        <el-radio-group v-model="item.effect_flag">
          <el-radio label="A">A(达4项)</el-radio>
          <el-radio label="B">B(达3项)</el-radio>
          <el-radio label="C">C(一般)</el-radio>
        </el-radio-group>
      </div>
      <div>
        <span style="font-size:18px;color:#ff5300;font-weight:700;margin-right:6px;">意见:</span>
        <el-input v-model="item.effect_explain" placeholder="在此输入评价" size="mini" style="width:420px;margin-right:6px;"></el-input>
        <el-button type="primary" size="mini" @click="toSaveLevel(item)">保存</el-button>
      </div>
    </div>
  </div>
  <el-pagination style="margin-top:5px;"
    background
    :current-page="page"
    :page-size="pageSize"
    layout="total, prev, pager, next, jumper"
    :total="totalCount"
    @current-change="currentPageChange">
  </el-pagination>
</div>
</template>

<script>
import { fileStorage } from '@/config'
import { getLectureForLevel, saveLectureLevel } from '@/api/departmentWork/lecture'
export default {
  data(){
    return {
      fileStorage: fileStorage,
      flag: -1,
      page: 1,
      pageSize: 20,
      totalCount: 0,
      dataList: []
    }
  },
  mounted() {
    this.queryData()
  },
  methods:{
    queryData(){
      const para = {
        level: this.flag,
        page: this.page,
        page_size: this.pageSize
      }
      getLectureForLevel(para).then(res => {
        const data = res.data
        this.dataList = data.data
        this.totalCount = data.total_count
      })
    },

    currentPageChange(page){
      this.page = page
      this.queryData()
    },
    
    selectValueChange(){
      this.page = 1
      this.queryData()
    },

    // 保存评级数据
    toSaveLevel(item){
      const putData = {
        lecture_id: item.id,
        effect_flag: item.effect_flag,
        lecture_scale: item.lecture_scale,
        effect_explain: item.effect_explain
      }
      saveLectureLevel(putData).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.msg-box{
  margin-bottom: 15px;
  padding: 10px;
  border-radius:4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
</style>
